<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <h1 style="padding-left:20px;">Mock UDP data</h1>
      <div>
        <ol>
          <li>ud_data对应是用户数据list，list的一个元素对应一个需要写入tag的数据，包括env,region,shop_id,ud_id,access_token
          <br/>
            shop_id,ud_id对应关系：ud_id分别写入到shop_id的元素中</li>
          <li>tag_data对应tag的数据，ud_data的数据都会写入到这些tag中</li>
        </ol>
      </div>
      <el-form-item label="ud_data" prop="ud_data">
        <span slot="label">
                  <span class="span-box">
                    <span>ud_data</span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      placement="bottom-start"
                    >
                      <div slot="content">
                        ud_data为list,可以存在多个dict,遍历dict写数据到tag中
                        <br/>
                        tag_env: 一个dict对应一个env,不能为空
                        <br/>
                        ud_region: 一个dict对应一个region,不能为空
                        <br/>
                        shop_id: 一个list，可以填写多个shopid,不能为空
                        <br/>
                        ud_id: 一个list，可以填写多个userid,不能为空
                        <br/>
                        access_token: 对应env的token
                      </div>
                      <span>
                        <i class="el-icon-question"></i>
                      </span>
                    </el-tooltip>
                  </span>
                </span>
        <vue-json-editor  v-model="form.ud_data" style="height: 400px" :showBtns="false" :mode="'code'" @json-change="onJsonChange" @json-save="onJsonSave" @has-error="onError"/>
<!--            <JsonEditor :height="400" v-model="form.ud_data" @isJson="updateIsRequestJson"></JsonEditor>-->
        </el-form-item>
      <el-form-item label="tag_data" prop="tag_data">
        <span slot="label">
                  <span class="span-box">
                    <span>tag_data</span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      placement="bottom-start"
                    >
                      <div slot="content">
                        tag_data为list,可以存在多个tag说明,ud_data中的数据都会写到这些tag中
                        <br/>
                        tag_name: tag的name，注意不能有空格等
                        <br/>
                        tag_val: tag的值
                        <br/>
                        tag_source: 默认为1
                      </div>
                      <span>
                        <i class="el-icon-question"></i>
                      </span>
                    </el-tooltip>
                  </span>
                </span>
        <vue-json-editor v-model="form.tag_data" style="height: 400px" :showBtns="false" :mode="'code'" @json-change="onJsonChange" @json-save="onJsonSave" @has-error="onError"/>
<!--            <JsonEditor :height="400" v-model="form.tag_data" @isJson="updateIsRequestJson"></JsonEditor>-->
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button :disabled="!isJson || !isRequestJson" type="primary" @click="onSubmit('form')">Create Now</el-button>
      </el-form-item>
    </el-form>
    <br>
  </div>
</template>

<script>
import ResultPane from "@/components/tools/ResultPane";
import {api, postRequest} from "@/api/commit";
 // 导入模块
import vueJsonEditor from 'vue-json-editor'
// import JsonEditor from "../JsonEditor";
export default {
  components: {
    ResultPane,
    vueJsonEditor
  },
  name: "MockDataTable",
  data() {
    var CheckNUm = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else if (value > 50) {
        callback(new Error('超过50，按照50造数据'));
      } else {
        callback();
      }
    };


    return {
      showResultCard: false,
      isLoadingResult: false,
      hasJsonFlag:true,
      isRequestJson:true,
      isJson:true,
      form: {
        ud_data: [{"tag_env":"test","ud_id":["306182","9030506"],"ud_region":"SG","shop_id":[220917637,7471781],"access_token":"tmdmMTPeipH0Rawym8a5Fwj4gZWTftnf"}],
        tag_data: [{"tag_name":"Date of Last Shop Gross Order in Last 720 Days","tag_val":"20230328","tag_source":1},{"tag_name":"Shop Gross Order Count in Last 30 Days","tag_val":"2","tag_source":1},{"tag_name":"Date of Joining Brand Membership","tag_val":"20230327","tag_source":1}],

      },
      rules: {
        ud_data: [
          {required: true, message: 'ud_data不能为空', trigger: 'blur'}
        ],
        tag_data: [
          {required: true, message: 'tag_data不能为空', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {

    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (!valid) {
          this.$message({
            "message": "请检查表单！",
            "type": "warning"
          })
          return
        }
        this.resultReturn = ''
        this.showResultCard = true
        this.isLoadingResult = true
        let params = Object.assign({}, this.form);
        postRequest(api['mock_udp_data'], params).then((res) => {
          this.resultReturn = res.resultReturn
          this.isLoadingResult = false
        }, (error) => {
          this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
          this.isLoadingResult = false
        })
      })
    },

    checkJson() {
      if (this.hasJsonFlag == false) {
        alert("json验证失败")
        return false
      }
      else
      {
          alert("json验证成功")
          return true
        }
      },
     onJsonChange(value){
        this.onJsonSave(value)
      },
    onJsonSave(value){
        this.resultInfo=value
        this.hasJsonFlag=true
      },
    onError(value){
        this.hasJsonFlag=false
      },
    updateIsRequestJson(value){
      this.isRequestJson = value
      console.log("request",this.isRequestJson)
    }
    }
}
</script>

<style>

.jsoneditor-menu {
  display: flex;
}
.jsoneditor-modes {
  display: none;
}
.jsoneditor-poweredBy {
  display: none;
}

.jsoneditor-vue {
  height: 100%;
  width: 80%;
}
.ace_content{
    background:rgba(255, 255, 255, 0.5);
    /*font-size:15px !important;*/
    /*font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体";*/
  }

.ace_editor, .ace_editor *{
  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important;
  font-size: 14px !important;font-weight: 400 !important;
  letter-spacing: 0 !important;}

</style>
